<template>
  <div class="flow main-layer">
    <div class="left">
      <div class="top">
        <img class="chabei" src="~@/assets/images/bg-19.png" alt="" />
        <span>{{ currentUser.nickName }}，您好！</span>
      </div>
      <img class="bg-20" src="~@/assets/images/bg-20.png" alt="" />

      <div>
        <div v-for="(item, idx) in leftNav" :key="idx" class="task-type" :class="{ active: idx === currentTaskIdx }" @click="changeTask(idx)">
          <span class="text">
            <i class="iconfont" :class="item.icon"></i>
            {{ item.label }}
          </span>
          <span class="count" v-if="item.count">{{ item.count }}</span>
        </div>
      </div>
    </div>
    <div class="right">
      <c-content-top :label="$route.meta.name"></c-content-top>
      <div class="filter-div">
        <div>
          <span class="f-name">流程名称：</span>
          <a-input class="f-input" placeholder="请输入流程名称" allow-clear v-model="params.procedureName" />
        </div>
        <div>
          <span class="f-name">发起人：</span>
          <a-input class="f-input" placeholder="请输入发起人" allow-clear v-model="params.promoter" />
        </div>

        <div>
          <span class="f-name">系统来源：</span>
          <system-from v-model="params.systemName"></system-from>
        </div>

        <div>
          <span class="f-name">发起部门：</span>
          <c-department v-model="params.promoterOrg"></c-department>
        </div>

        <div>
          <span class="f-name">流程标题：</span>
          <a-input class="f-input" placeholder="请输入流程标题" allow-clear v-model="params.title" />
        </div>

        <div>
          <span class="f-name">流程类别：</span>
          <flow-type v-model="params.processType"></flow-type>
        </div>
      </div>
      <div class="search-div">
        <span class="f-name"></span>
        <div class="f-input">
          <a-button type="primary" @click="search">查询</a-button>
          <a-button @click="reset">重置</a-button>
        </div>
      </div>

      <div class="list">
        <div class="l-row l-header">
          <div class="list-th" :class="[`td-${idx}`]" v-for="(item, idx) in tableHeader" :key="idx" @click="changeOrder(idx)">
            <span>{{ item.label }}</span>
            <span class="iconfont iconsanjiao3-copy"></span>
          </div>
        </div>
        <div class="l-body">
          <a class="l-row " v-for="(item, idx) in dataSource" :key="idx" @click="_goFlowDetail(item.id)" href="javascript:;" :title="item.title">
            <div class="td-0">{{ item.title }}</div>
            <div class="td-1">{{ item.initiationTime }}</div>
            <div class="td-2">{{ item.promoter }}</div>
            <div class="td-3">{{ item.promoterOrg }}</div>
            <div class="td-4">{{ item.procedureName }}</div>
            <div class="td-5">{{ item.systemName }}</div>
            <div class="td-6">{{ item.receiverTime }}</div>
          </a>
        </div>

        <div class="page-div">
          <a-pagination
            v-model="params.pageNum"
            @change="onChange"
            :showTotal="(total) => `共${total}条`"
            show-size-changer
            :total="total"
            @showSizeChange="onShowSizeChange"
            :pageSize.sync="params.pageSize"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Base from "@/controllers/base.ts";
import { Component } from "vue-property-decorator";
import CContentTop from "@/components/CContentTop.vue";
import { Input, Select, Button, Pagination } from "ant-design-vue";
import SystemFrom from "./components/systemFrom.vue";
import FlowType from "./components/flowType.vue";
import CDepartment from "@/components/CDepartment.vue";

const _params = {
  pageNum: 1,
  pageSize: 20,
  sortBy: "",
  order: "",
  pendType: "1",
  status: "2",
  receiverUserCode: "",
  procedureName: "",
  promoter: "",
  systemName: "",
  promoterOrg: "",
  title: "",
  processType: ""
};

@Component({
  name: "Flow",
  components: {
    CContentTop,
    SystemFrom,
    FlowType,
    CDepartment,
    AInput: Input,
    ASelect: Select,
    ASelectOption: Select.Option,
    AButton: Button,
    APagination: Pagination
  }
})
export default class Flow extends Base {
  private dataSource: any[] = [];
  /**
   * taskType：任务类型
   * daiban： 待办，daiyue：待阅
   */
  private currentTaskIdx = 0;
  private leftNav: any[] = [
    { label: "待办任务", key: "daiban", icon: "icondaiban", count: 0, pendType: "1" },
    { label: "待阅任务", key: "daiyue", icon: "icondaiyue", count: 0, pendType: "2" }
  ];
  private tableHeader: any[] = [
    { label: "流程标题", key: "title", order: "desc" },
    { label: "创建时间", key: "initiationTime", order: "desc" },
    { label: "发起人", key: "promoter", order: "desc" },
    { label: "发起部门", key: "promoterOrg", order: "desc" },
    { label: "流程名称", key: "procedureName", order: "desc" },
    { label: "系统来源", key: "systemName", order: "desc" },
    { label: "接收时间", key: "receiverTime", order: "desc" }
  ];
  // 排序索引，对应tableHeader
  private orderIdx = 1;

  private total = 0;

  // 接口相关参数 START
  private params: any = {};
  // 接口相关参数 END

  // 系统来源
  private systemFrom = "";
  // 流程类型
  private processType = "";

  private timer: any = null;

  private destroyed() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  }

  private created() {
    this.reset();
    this.getProcessCount();

    this.timer = setInterval(() => {
      this.getProcessList();
    }, 30000);
  }

  private changeOrder(idx: number) {
    const order = this.tableHeader[idx].order === "desc" ? "asc" : "desc";
    this.$set(this.tableHeader[idx], "order", order);
    this.orderIdx = idx;
    this.getProcessList();
  }

  private onChange() {
    this.dataSource = [];
    this.getProcessList();
  }

  private onShowSizeChange() {
    this.search();
  }

  private changeTask(idx: number) {
    this.currentTaskIdx = idx;
    this.$set(this.params, "pageNum", 1);
    this.dataSource = [];
    this.getProcessList();
  }

  private getProcessCount() {
    // 获取待办数量
    this.$api
      .ProcessCount({
        pendType: "1",
        status: "2",
        receiverUserCode: this.currentUser.userNo
      })
      .then((res: Api.Response) => this.$set(this.leftNav[0], "count", res.data));

    // 获取待阅数量
    this.$api
      .ProcessCount({
        pendType: "2",
        status: "2",
        receiverUserCode: this.currentUser.userNo
      })
      .then((res: Api.Response) => this.$set(this.leftNav[1], "count", res.data));
  }

  private async getProcessList() {
    const res = await this.$api.ProcessList(this.processListParams);
    if (res && res.code === 200) {
      this.total = res.total;
      this.dataSource = res.rows;
    }
  }

  private search() {
    this.dataSource = [];
    this.$set(this.params, "pageNum", 1);
    this.getProcessList();
  }

  private reset() {
    this.params = { ..._params };
    this.dataSource = [];
    this.getProcessList();
  }

  private get processListParams() {
    const _return = { ...this.params };
    _return.receiverUserCode = this.currentUser.userNo;
    _return.pendType = this.leftNav[this.currentTaskIdx].pendType;
    _return.sortBy = this.tableHeader[this.orderIdx].key;
    _return.order = this.tableHeader[this.orderIdx].order;
    return _return;
  }
}
</script>

<style lang="less" scoped>
@import "~@/assets/style/mixin.less";
.flow {
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
  min-height: 650px;

  .left {
    background-color: white;
    // width: 204px;
    .scale(width, 204px);
    flex-shrink: 0;
    background: #ffffff;
    border-radius: 0px 2px 0px 0px;
    box-shadow: 0px 0px 10px 0px rgba(83, 112, 239, 0.22);

    .top {
      .scale(padding-top, 25px);
      .scale(padding-bottom, 6px);
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .chabei {
    margin-right: 4px;
  }

  .bg-20 {
    max-width: 100%;
  }

  .task-type {
    margin-left: 10px;
    padding: 9px 22px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 100px 0px 0px 100px;
    margin-top: 4px;

    .icondaiban,
    .icondaiyue {
      margin-right: 4px;
    }

    .text {
      display: flex;
      align-items: center;
      line-height: 100%;
    }

    .count {
      background-color: #52a4ee;
      color: white;
      border-radius: 8px;
      font-size: 13px;
      padding: 0 6px;
    }

    &:hover {
      background-color: rgba(234, 238, 249, 0.72);
      color: #2674d5;
    }

    &.active {
      background-color: rgba(234, 238, 249, 0.72);
      color: #2674d5;

      .count {
        background-color: white;
        color: #52a4ee;
      }
    }
  }

  .right {
    position: relative;
    padding-bottom: 44px;
    flex: 1;
    margin-left: 20px;
    background: #ffffff;
    border-radius: 0px 2px 0px 0px;
    box-shadow: 0px 0px 10px 0px rgba(83, 112, 239, 0.22);
    .scale(padding-left, 28px);
    .scale(padding-right, 28px);
    overflow: hidden;
  }
  .filter-div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    & > div {
      display: flex;
      align-items: center;
      flex-shrink: 0;
      width: 33%;
      margin-top: 18px;
    }

    .f-name {
      text-align: right;
      flex-shrink: 0;
      width: 80px;
    }

    .f-input {
      flex: 1;
    }
  }

  .list {
    margin-top: 24px;

    .list-th {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .l-row {
      position: relative;
      cursor: pointer;
      display: flex;
      height: 40px;
      line-height: 40px;
      background: #ffffff;
      border-bottom: 1px solid #ececec;
      justify-content: space-between;
    }
    .l-header {
      height: 36px;
      line-height: 36px;
      background: linear-gradient(0deg, #4b9cea 0%, #66b0f2 100%);
      border-radius: 2px;
      color: white;

      .iconsanjiao3-copy {
        font-size: 9px;
        margin-left: 4px;
        transition-duration: 0.3s;

        &.asc {
          transform: rotate(180deg);
        }
      }
    }

    & > div {
      flex-shrink: 0;
      text-align: center;
    }
    .td-0,
    .td-4 {
      width: 20%;
      padding-left: 12px;
    }
    .td-3 {
      width: 12%;
    }
    .td-1,
    .td-6 {
      width: 11%;
      // font-size: 12px;
    }

    .td-2,
    .td-5 {
      width: 10%;
    }

    .l-body {
      color: #333333;
      letter-spacing: -1px;
      font-size: 13px;
      // .td-0,
      // .td-4 {
      //   overflow: hidden;
      //   text-overflow: ellipsis;
      //   white-space: nowrap;
      // }
      .l-row {
        & > div {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        &:hover {
          line-height: 42px;
          margin-top: -1px;
          height: 41px;
          position: relative;
          z-index: 1;
          box-shadow: 0px 0px 10px 0px rgba(83, 112, 239, 0.22);
          color: #2674d5;

          &::before {
            position: absolute;
            content: "\e739";
            font-family: "iconfont";
            transform: rotate(-90deg);
            .scale(font-size, 14px);
            left: -13px;
          }
        }
      }
    }
  }

  .page-div {
    background-color: white;
    z-index: 1;
    box-shadow: 0px -1px 0px 0px #d9d9d9;
    padding: 6px 24px;
    display: flex;
    justify-content: flex-end;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .search-div {
    margin-top: 18px;

    .ant-btn-primary {
      background: linear-gradient(0deg, #4b9cea 0%, #56a8f0 100%);
      border: 0;
      margin-right: 20px;
    }
  }
}
</style>
